<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form" v-if="headerShow">
        <a-form v-if="permissionStore.hasPermisson('sgdfs.cx1')" size="mini" :model="pageData" layout="inline"
          :label-col-props="{ span: 7 }" :wrapper-col-props="{ span: 17 }">
          <a-form-item :style="{ width: '300px' }" label="申购人" label-col-flex="80px">
            <!-- <a-select popup-container="html"  :style="{width:'200px'}" class="bacClass"  :loading="loadingq" @search="handleSearchq" v-model="pageData.dropDownDataq"
                                                                                                          :filter-option="false" allow-search allow-clear @focus="focusSelq">
                                                                                                          <a-option v-for="item in pageData.nameListq" :value="item.applyPerson">{{
                                                                                                                  item.applyPerson
                                                                                                          }}</a-option>
                                                                                                      </a-select> -->
            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.dropDownDataq" @press-enter="huiche" />
          </a-form-item>

          <!-- <a-col :span="6">
                                                                                                    <a-form-item label="物料名称">
                                                                                                        <a-select popup-container="html"  class="bacClass"  :style="{ width: '15rem' }" :loading="loading" @search="xuQiuWl"
                                                                                                            v-model="isDatas.is5" :filter-option="false" allow-search allow-clear
                                                                                                            @focus="xuQiuWls">
                                                                                                            <a-option v-for="item in isDatas.is5Array" :value="item.materialName">{{
                                                                                                                    item.materialName
                                                                                                            }}</a-option>
                                                                                                        </a-select>
                                                                                                    </a-form-item>
                                                                                                </a-col> -->

          <a-form-item :style="{ width: '300px' }" label="申购类型" label-col-flex="80px">
            <!-- <a-select popup-container="html"  :style="{width:'200px'}" class="bacClass"  :loading="loadingq" @search="handleSearchz" v-model="pageData.dropDownDataqsz"
                                                                                                            :filter-option="false" allow-search allow-clear @focus="focusSelz">
                                                                                                            <a-option v-for="item in pageData.nameListz" :value="item.applyType">{{
                                                                                                                    item.applyType
                                                                                                            }}</a-option>
                                                                                                        </a-select> -->
            <a-select popup-container="html"  class="bacClass" v-model="pageData.dropDownDataqsz" allow-clear @change="typeChange">
              <a-option style="color: red; font-weight: bolder" value="0" @press-enter="huiche">加急</a-option>
              <a-option style="color: green; font-weight: bolder" value="1" @press-enter="huiche">计划</a-option>
              <a-option style="color: blue; font-weight: bolder" value="2" @press-enter="huiche">临时</a-option>
            </a-select>
          </a-form-item>

          <a-form-item :style="{ width: '300px' }" label="申购公司" label-col-flex="80px">
            <a-cascader v-model="pageData.dropDownDataqqq1" :options="pageData.nameListq1" allow-clear ref="casOb5"
              @change="cascaderChange5($event, pageData.dropDownDataqqq1)" class="bacClass" :title="pageData.title5"
                :loading="pageData.loading5" popup-container="html"/>
          </a-form-item>

          <a-form-item :style="{ width: '300px' }" label="申购部门" label-col-flex="80px">
            <a-cascader v-model="pageData.dropDownDataqqq" :options="pageData.nameListq" allow-clear ref="casOb6"
              :disabled="pageData.dropDownDataqqq1 == null || pageData.dropDownDataqqq1 == ''" @change="cascaderChange6"
              class="bacClass" :title="pageData.title6"   :loading="pageData.loading6"
              style="border: 1px solid #a29f9f !important;" popup-container="html"/>
          </a-form-item>

          <a-form-item :style="{ width: '300px' }" label="申购单号" label-col-flex="80px">
            <a-input allow-clear  class="bacClass" v-model="pageData.applyCode"
              @press-enter="huiche" />
          </a-form-item>

          <a-form-item :style="{ width: '300px' }" label="申请日期" label-col-flex="80px">
            <a-range-picker  popup-container="html"   class="bacClass" @select="onSelect" @clear="onClear"
              @press-enter="huiche" />
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">

        <div class="bg-container-1">
          <div>

            <Toolbar :items="[
              `${permissionStore.hasPermisson('sgdfs.cx1') ? '查询' : ''}`,
              `${permissionStore.hasPermisson('sgdfs.sc1') ? '删除' : ''}`,
              `${permissionStore.hasPermisson('sgdfs.fs1') ? '反审' : ''}`,
              `${permissionStore.hasPermisson('sgdfs.dy1') ? '打印' : ''}`,
            ]" @del="deleteHandler" @select="selectHandler" @tj="submit(1)" @qxtj="submit(0)" @counter="auditStates"
              @dyBoufei="printPdf"></Toolbar>
          </div>
        </div>
      </div>
    </template>
    <template #pageTabel>

      <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height: 100%; width: 100%; z-index: 999">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
          style="height: 100%" :defaultColDef="defaultColDef" class="ag-theme-alpine" :rowData="table.dataList"
          :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
      </a-spin>
      <!-- </a-tab-pane>
                                                                                    </a-tabs> -->
    </template>
    <paginationCopys :page-size-options="pagingList1" :total="pagination.total" show-total show-jumper show-page-size
      @change="PageSize" @page-size-change="change1" style="justify-content: center" :page-size="pagination.pageSize"
      :current="pagination.page" />
    <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 999 }" :width="400"
      popup-container=".arco-tabs-content" height="100%" placement="bottom" :visible="pageData.showAdd" unmountOnClose
      @ok="sideOk" @cancel="cancelsDel">
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <div style="width: 1540px; overflow: auto" class="scrollbar" v-loading="loadingbm">
        <el-scrollbar>
          <a-form ref="formRef" layout="inline" :model="dataForm" size="mini" :label-col-props="{ span: 10 }"
            :wrapper-col-props="{ span: 14 }">
            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="申购人" field="applyPerson"
              :rules="[{ required: true, message: '申购人必填' }]" :validate-trigger="['change', 'blur']">
              <a-input disabled :style="{ width: '22rem' }" placeholder="" v-model="dataForm.applyPerson"
                class="bacClass" />
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="申购单号" field="applyCode"
              :rules="[{ required: true, message: '申购单号必填' }]" :validate-trigger="['change', 'blur']">
              <a-input :style="{ width: '22rem' }" disabled placeholder="" v-model="dataForm.applyCode"
                class="bacClass" />
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="申购公司"
              :rules="[{ required: true, message: '公司必填' }]" :validate-trigger="['change', 'blur']">
              <!-- <a-select popup-container="html"  class="bacClass" :loading="loading2" field="applyCompany"
                                      v-model="dataForm.applyCompany" @focus="foucusUseFrim(1)" @search="handleSearch2"
                                      :filter-option="false" @change="changeGs(1)">
                                      <a-option v-for="item of pageData.firmList" :value="item['id']">
                                          {{ item.typeName }}{{ item.typeName == "" ? "" : "-" }}{{ item.firmName }}
                                      </a-option>
                                  </a-select> -->
              <a-cascader v-model="dataForm.applyCompany" :options="pageData.firmGroupList" allow-clear ref="casOb"
                @change="cascaderChange($event, dataForm.applyCompany)" class="bacClass" :title="pageData.title"
                  :loading="pageData.loading" popup-container="html"/>
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="申购部门" field="applyDepartmentId"
              :rules="[{ required: true, message: '部门必填' }]" :validate-trigger="['change', 'blur']">
              <!-- <a-select popup-container="html"  class="bacClass" :loading="loading2" v-model="dataForm.applyDepartment"
                                      @focus="foucusUseFrim(2)" @search="handleSearch2" :filter-option="false">
                                      <a-option v-for="item of pageData.bmList" :value="item['department']">{{
                                          item['department']
                                      }}</a-option>
                                  </a-select> -->
              <a-cascader v-model="dataForm.applyDepartmentId" :options="pageData.bmList" allow-clear ref="casOb1"
                :disabled="dataForm.applyCompany == null || dataForm.applyCompany == ''" @change="cascaderChange1"
                class="bacClass" :title="pageData.title1"   :loading="pageData.loading1" popup-container="html"/>
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="采购公司" field="useCompany"
              :rules="[{ required: true, message: '公司必填' }]" :validate-trigger="['change', 'blur']">
              <a-cascader v-model="dataForm.useCompany" :options="pageData.firmGroupList1" allow-clear ref="casOb2"
                @change="cascaderChange2($event, dataForm.useCompany)" disabled class="bacClass" :title="pageData.title2"
                  :loading="pageData.loading2" popup-container="html"/>
            </a-form-item>

            <!-- <a-form-item
              :style="{ width: '280px' }"
              label-col-flex="110px"
              label="采购部门"
              field="useDepartmentId"
              :rules="[{ required: true, message: '采购部门必填' }]"
              :validate-trigger="['change', 'blur']"
            >
              <a-cascader
                v-model="dataForm.useDepartmentId"
                :options="pageData.bmList1"
                allow-clear
                ref="casOb3"
                :disabled="dataForm.useCompany == null || dataForm.useCompany == ''"
                @change="cascaderChange3"
                :class="{ bacClass: !(dataForm.useCompany == null || dataForm.useCompany == '') }"
                :title="pageData.title3"
                 
                :loading="pageData.loading3"
              />
            </a-form-item> -->

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="申购类型" field="applyType"
              :rules="[{ required: true, message: '申购类型必填' }]" :validate-trigger="['change', 'blur']">
              <a-select popup-container="html"  class="bacClass" v-model="dataForm.applyType" :style="{ width: '22rem' }">
                <a-option style="color: red; font-weight: bolder" value="0">加急</a-option>
                <a-option style="color: green; font-weight: bolder" value="1">计划</a-option>
                <a-option style="color: blue; font-weight: bolder" value="2">临时</a-option>
              </a-select>
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="申购日期" field="applyDate"
              :rules="[{ required: true, message: '日期必填' }]" :validate-trigger="['change', 'blur']">
              <a-date-picker  popup-container="html"  class="bacClass" style="width: 22rem" :time-picker-props="{ defaultValue: '00:00:00' }"
                format="YYYY-MM-DD" v-model="dataForm.applyDate" />
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="计划交货日期" field="planDeliveryDate"
              :rules="[{ required: true, message: '日期必填' }]" :validate-trigger="['change', 'blur']">
              <a-date-picker  popup-container="html"  class="bacClass" style="width: 22rem" :time-picker-props="{ defaultValue: '00:00:00' }"
                format="YYYY-MM-DD" v-model="dataForm.planDeliveryDate" />
            </a-form-item>

            <a-form-item :style="{ width: '1192px' }" label-col-flex="110px" label="备注"
              :rules="[{ required: true, message: '日期必填' }]" :validate-trigger="['change', 'blur']">
              <a-textarea class="bacClass" placeholder="" v-model="dataForm.remark" :max-length="400" allow-clear
                show-word-limit />
            </a-form-item>
          </a-form>
          <div>
          </div>
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReadysz111"
            style="height: 560px" :defaultColDef="defaultColDefsz111" class="ag-theme-alpine"
            :rowData="pageData.tqDataList" :columnDefs="tcsz111"></AgGridVuesCopys>
        </el-scrollbar>
      </div>
    </a-drawer>

    <a-drawer ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 1001, border: '1px solid #ccc' }"
      popup-container=".arco-tabs-content" height="100%" placement="bottom" :visible="pageData1.showAdd" unmountOnClose
      @ok="sideOks" @cancel="pageData1.showAdd = false">
      <template #title>
        {{ pageData1.title }}
      </template>
      <div>
        <a-form layout="vertical" :model="isDataList">
          <a-space>
            <!-- <a-form-item label="物料编号">
                                                                                                <a-select popup-container="html"  class="bacClass"  :style="{ width: '22rem' }" :loading="loading" placeholder="请输入物料编号"
                                                                                                    @search="handleSearch" v-model="isDataList.materialCode" :filter-option="false" allow-search
                                                                                                    allow-clear @focus="focusSel">
                                                                                                    <a-option v-for="item in pageData.nameList as any" :value="item.materialCode">{{
                                                                                                            item.materialCode
                                                                                                    }}</a-option>
                                                                                                </a-select>
                                                                                            </a-form-item> -->
            <a-form-item label="物料名称">
              <a-select popup-container="html"  class="bacClass" :style="{ width: '22rem' }" :loading="loading" @search="handleSearchs"
                v-model="isDataList.materialName" :filter-option="false" allow-search allow-clear @focus="focusSels">
                <a-option v-for="item in pageData.nameList as any" :value="item.materialName">{{
                  item.materialName
                }}</a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="规格">
              <a-input class="bacClass" :style="{ width: '22rem' }" v-model="isDataList.specName" />
            </a-form-item>
            <a-form-item label="批次">
              <a-input class="bacClass" :style="{ width: '22rem' }" v-model="isDataList.batchName" />
            </a-form-item>
          </a-space>
          <a-space> </a-space>
        </a-form>
      </div>
    </a-drawer>

    <a-modal width="100rem" v-model:visible="visible" @cancel="visible = false" @ok="handleBeforeOk">
      <template #title> 提取需求单 </template>
      <div class="xqdxx">
        <a-form size="small" :model="pageData" layout="inline">
          <a-form-item label="需求单号">
            <a-select popup-container="html"  class="bacClass" :style="{ width: '320px' }" :loading="loading" @search="handleSearch"
              v-model="pageData.dropDownData" :filter-option="false" allow-search allow-clear @focus="focusSel">
              <a-option v-for="item in pageData.nameList" :value="item">{{ item }}</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <Toolbar :style="{ width: '100px' }" :items="['查询']" @select="selectSh"></Toolbar>
      </div>
      <a-table :scrollbar="true" sticky-header height="100%" @page-change="pagination1.change" stripe :bordered="true"
        :columns="tableColumnsz" :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }"
        v-model:selected-keys="selectedRowKeys" :loading="tables.tableLoading" :data="tables.dataList"
        :pagination="pagination1" :rowKey="rowKey">
        <template #confirmState="{ record }">
          <a-button v-if="record.confirmState == 0" type="primary" status="danger" disabled size="mini">未确认
          </a-button>
          <a-button v-if="record.confirmState == 1" status="success" disabled size="mini">已确认</a-button>
          <!-- <span v-if="record.confirmState == 0">未确认</span>
                                                                                                     <span v-if="record.confirmState == 1">已确认</span> -->
        </template>
        <template #auditState="{ record }">
          <a-button v-if="record.auditState == 0" type="primary" status="warning" disabled size="mini">待审核
          </a-button>
          <a-button v-if="record.auditState == 1" status="success" disabled size="mini">审核通过</a-button>
          <a-button v-if="record.auditState == 2" type="primary" status="danger" disabled size="mini">审核驳回
          </a-button>
          <!-- <span v-if="record.auditState == 0">待审核</span>
                                                                                                     <span v-if="record.auditState == 1">审核通过</span>
                                                                                                     <span v-if="record.auditState == 2">审核驳回</span> -->
        </template>
      </a-table>
    </a-modal>
    <a-modal v-model:visible="visible1" title="申购单详情" :width="1200" :footer="false" :draggable="true">
      <a-table :style="{
        height: '100%',
        marginTop: '10px',
      }" stripe :bordered="true" :scrollbar="true" sticky-header :columns="tableColumns2"
        :data="pageData.isDetailsList">
        <template #finishState="{ record }">
          <!-- str = val == "1"?"one":val=="2"?"two":"three" -->
          <div style="width: 100%">{{
            record.finishState === 0 ? '已完结' : record.finishState === 1 ? '部分完结' : '未完结'
          }}</div>
        </template>
      </a-table>

      <!--   <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" style="height:100%" rowSelection="multiple" @grid-ready="gridReadysz111"
                            :defaultColDef="defaultColDefsz111" class='ag-theme-alpine' :rowData="pageData.tqDataList"
                            :columnDefs="tcsz111" :bordered="true" :scrollbar="true" sticky-header ></AgGridVuesCopys> -->
    </a-modal>
    <a-drawer ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 1001, border: '1px solid #ccc' }"
      popup-container=".arco-tabs-content" height="100%" placement="bottom" :ok-loading="pageData.pageLoading"
      :visible="isDtasZh" unmountOnClose @ok="sideOkss" @cancel="cancelDelets">
      <template #title> 修改申购单 </template>
      <div style="min-width: 1540px; overflow: auto" v-loading="loadingbm">
        <el-scrollbar>
          <a-form size="mini" ref="formRef" layout="inline" :model="dataForm" :label-col-props="{ span: 11 }"
            :wrapper-col-props="{ span: 13 }">
            <!-- <a-form-item label="申购人" field="applyPerson" :rules="[{ required: true, message: '申购人必填' }]"
                                                                                                    :validate-trigger="['change', 'blur']">
                                                                                                    <a-input class="bacClass" :style="{ width: '22rem' }" v-model="dataForm.applyPerson"
                                                                                                        :disabled="pageData1.title != '创建申购单'" />
                                                                                                </a-form-item> -->
            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="申购人">
              <a-input disabled :style="{ width: '22rem' }" :disabled="pageData1.title != '创建申购单'" placeholder=""
                v-model="dataForm.applyPerson" class="bacClass" />
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="申购单号">
              <a-input disabled :style="{ width: '22rem' }" v-model="dataForm.applyCode" class="bacClass" />
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="申购公司"
              :rules="[{ required: true, message: '公司必填' }]" :validate-trigger="['change', 'blur']">
              <a-cascader v-model="dataForm.applyCompany" :options="pageData.firmGroupList" allow-clear ref="casOb"
                @change="cascaderChange($event, dataForm.applyCompany)" class="bacClass" :title="pageData.title"
                  :loading="pageData.loading" popup-container="html"/>
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="申购部门" field="applyDepartment"
              :rules="[{ required: true, message: '部门必填' }]" :validate-trigger="['change', 'blur']">
              <a-cascader v-model="dataForm.applyDepartment" :options="pageData.bmList" allow-clear ref="casOb1"
                :disabled="dataForm.applyCompany == null || dataForm.applyCompany == ''" @change="cascaderChange1"
                class="bacClass" :title="pageData.title1"   :loading="pageData.loading1" popup-container="html"/>
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="采购公司" field="useCompany"
              :rules="[{ required: true, message: '公司必填' }]" :validate-trigger="['change', 'blur']">
              <a-cascader v-model="dataForm.useCompany" :options="pageData.firmGroupList1" allow-clear ref="casOb2"
                @change="cascaderChanges2($event, dataForm.useCompany)" class="bacClass" :title="pageData.title2"
                  :loading="pageData.loading2" popup-container="html"/>
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="采购部门" field="useDepartment"
              :rules="[{ required: true, message: '采购部门必填' }]" :validate-trigger="['change', 'blur']">
              <a-cascader v-model="dataForm.useDepartmentId" :options="pageData.bmList1" allow-clear ref="casOb3"
                :disabled="dataForm.useCompany == null || dataForm.useCompany == ''" @change="cascaderChange3"
                class="bacClass" :title="pageData.title3"   :loading="pageData.loading3" popup-container="html"/>
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="申购类型" field="applyType"
              :rules="[{ required: true, message: '申购类型必填' }]" :validate-trigger="['change', 'blur']">
              <a-select popup-container="html"  class="bacClass" v-model="dataForm.applyType" :style="{ width: '22rem' }">
                <a-option style="color: red; font-weight: bolder" value="0">加急</a-option>
                <a-option style="color: green; font-weight: bolder" value="1">计划</a-option>
                <a-option style="color: blue; font-weight: bolder" value="2">临时</a-option>
              </a-select>
              <!-- <a-input class="bacClass" :style="{ width: '22rem' }" v-model="dataForm.applyType" /> -->
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="110px" label="计划交货日期" field="planDeliveryDate"
              :rules="[{ required: true, message: '日期必填' }]" :validate-trigger="['change', 'blur']">
              <a-date-picker  popup-container="html"  class="bacClass" style="width: 22rem" :time-picker-props="{ defaultValue: '00:00:00' }"
                format="YYYY-MM-DD" v-model="dataForm.planDeliveryDate" />
            </a-form-item>

            <a-form-item :style="{ width: '1192px' }" label-col-flex="110px" label="备注" field="remark">
              <a-textarea class="bacClass" placeholder="" v-model="dataForm.remark" :max-length="400" allow-clear
                show-word-limit />
            </a-form-item>
          </a-form>
          <!-- <a-table :scrollbar="true" sticky-header stripe :bordered="true" :columns="tableColumns2"
                                                                                             v-model:selected-keys="selectedRowKeys1" :loading="table.tableLoading" :data="pageData.tqDataList"
                                                                                             :pagination="paginations11" rowKey="uid" size="mini">

                                                                                        <template #applyNum="{ record }">
                                                                                            <a-input-number v-model="record.applyNum" class="input-demo" :min="0" :max="10000000000000000000" />
                                                                                        </template>
                                                                                        <template #stockNum="{ record }">
                                                                                            <a-input-number v-model="record.stockNum" class="input-demo" :min="0" :max="10000000000000000000" />
                                                                                        </template>

                                                                                        <template #remark="{ record }">
                                                                                            <a-input class="bacClass" v-model="record.remark" />
                                                                                        </template>
                                                                                    </a-table> -->

          <!--   <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReadysz111" style="height:85%"
                                                                                                       :defaultColDef="defaultColDefsz111" class='ag-theme-alpine' :rowData="pageData.tqDataList"
                                                                                                       :columnDefs="tcsz111"></AgGridVuesCopys> -->
          <a-space>
            <Toolbar :items="['添加物料', '删除']" @tjWl="tjWls" @del="scWls"></Toolbar>
            <!-- <a-button type="primary" @click="tjWls" size="mini">添加物料</a-button>
            <a-button type="primary" @click="scWls" size="mini">删除</a-button> -->
          </a-space>
          <a-table :style="{
            marginTop: '10px',
          }" stripe :bordered="true" :scrollbar="true" sticky-header :columns="tableColumns3" :data="isDataListss"
            v-model:selected-keys="selectedRowKeys1" row-key="isTypeIds"
            :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }" size="mini" :pagination="false">
            <template #materialCode="{ record }">
              <a-select popup-container="html"  disabled @search="hqWlCodes" v-model="record.materialCode" allow-search allow-clear
                @click="hqWlCode" @change="hqWlCodezs(record)">
                <a-option v-for="item in isWlCodeList" :value="item.materialCode">{{
                  item.materialCode
                }}</a-option>
              </a-select>
            </template>
            <template #materialName="{ record }">
              <a-select popup-container="html"  disabled :loading="loading" @search="handleSearchsm" v-model="record.materialName"
                :filter-option="false" allow-search allow-clear @focus="focusSelsm" @change="handles(record)">
                <a-option v-for="item in optionssm" :value="item.materialName">{{
                  item.materialName
                }}</a-option>
              </a-select>
            </template>
            <template #specName="{ record }">
              <a-input v-model="record.specName" disabled />
            </template>
            <template #unit="{ record }">
              <a-input v-model="record.unit" disabled />
            </template>
            <template #needNum="{ record }">
              <div style="width: 100%">{{ record.needNum }}
                <!-- <a-input-number v-model="record.needNum" class="input-demo" :min="0" :max="100000000000000"
                                        disabled /> -->
              </div>
            </template>
            <template #applyNum="{ record }">
              <div style="width: 100%">
                <a-input-number v-model="record.applyNum" class="input-demo bacClass" :min="0" :max="100000000000000" />
              </div>
            </template>
            <template #stockNum="{ record }">
              <div style="width: 100%">
                <a-input-number v-model="record.stockNum" class="input-demo" :min="0" :max="100000000000000" disabled />
              </div>
            </template>
            <template #finishState="{ record }">
              <div style="width: 100%">{{
                record.finishState === 0
                ? '已完结'
                : record.finishState === 1
                  ? '部分完结'
                  : '未完结'
              }}</div>
            </template>
            <!-- <template #finishState="{ record }">
                                    <a-input class="bacClass" v-model="record.finishState" disabled  />
                                </template> -->
            <template #remark="{ record }">
              <a-input class="bacClass" v-model="record.remark" />
            </template>
          </a-table>
        </el-scrollbar>
      </div>
    </a-drawer>
    <a-modal :visible="visiblecg" ok-text="打印" @ok="print" :width="794" @cancel="no">
      <template #title> 物料申购单 </template>
      <div id="request2" style="height:1090px">
        <h2 style="text-align:center">物料申购单</h2>
        <div id="dys">
          <div>申购类型:{{
            idDtaDys.applyType == 0 ? '加急' : idDtaDys.applyType == 1 ? '计划' : '临时'
          }}</div>
          <div>申购日期:{{ dataTime[0] }}</div>
          <div>申购单号:{{ idDtaDys.applyCode }}</div>
        </div>
        <span style="font-weight: 1000"> 备注：{{ idDtaDys.remark }}</span>
        <table class="isTable">
          <tr>
            <th>产品编号</th>
            <th>产品名称</th>
            <th>规格</th>
            <th>数量</th>
            <th>单位</th>
            <th>备注</th>
          </tr>
          <tr v-for="item in idDtaDy">
            <td>{{ item.materialCode }}</td>
            <td>{{ item.materialName }}</td>
            <td>{{ item.specName }}</td>
            <td>{{ item.applyNum }}</td>
            <td>{{ item.unit }}</td>
            <td>{{ item.remark }}</td>
          </tr>
          <tr>
            <th colspan="3" style="letter-spacing: 50px">合计</th>
            <th colspan="3">{{ total }}</th>
          </tr>
        </table>
        <div id="dys">
          <div>制单人:{{ idDtaDys.createName }}</div>
          <div>审核人:{{ idDtaDys.auditPerson }}</div>
          <div>制单日期:{{ dataTime2[0] }}</div>
          <div>申购人:{{ idDtaDys.applyPerson }}</div>
        </div>
      </div>
    </a-modal>
    <a-modal fullscreen v-model:visible="visibleWl" :on-before-ok="handleOk" @cancel="handleCancel"
      :mask-closable="false">
      <template #title> 选择物料信息 </template>
      <div style="width: 85%; display: flex; justify-content: space-between">
        <div>
          <span>物料大类:</span>
          <a-select popup-container="html"  class="bacClass" :loading="WLloading" @search="WLhandleSearch" v-model="bigClassName"
            @change="bigChange" :filter-option="false" allow-search allow-clear @focus="WLfocusSel" style="width:200px">
            <a-option v-for="item in pageData.bigName">
              {{ item }}
            </a-option>
          </a-select>
        </div>
        <div>
          <span>物料小类:</span>
          <a-select popup-container="html"  class="bacClass" :loading="WLloading1" @search="WLhandleSearch1" v-model="subClassName"
            :filter-option="false" allow-search allow-clear @focus="WLfocusSel1" style="width:200px">
            <a-option v-for="item in pageData.samllName">
              {{ item }}
            </a-option>
          </a-select>
        </div>
        <div>
          <span>物料编号:</span>
          <a-select popup-container="html"  class="bacClass" :loading="WLloading2" @search="WLhandleSearch2" v-model="materialCode"
            :filter-option="false" allow-search allow-clear @focus="WLfocusSel2" @change="WLhandleCode"
            style="width:200px">
            <a-option v-for="item in pageData.codeList" :value="item.materialCode + '——' + item.materialName">
              {{ item["materialCode"] + ' —— ' + item["materialName"] }}
            </a-option>
          </a-select>
        </div>
        <div>
          <span>物料名称:</span>
          <a-select popup-container="html"  class="bacClass" :loading="WLloading3" @search="WLhandleSearch3" v-model="materialName"
            :filter-option="false" allow-search allow-clear @focus="WLfocusSel3" @change="WLhandleName"
            style="width:200px">
            <a-option v-for="item in pageData.codeList" :value="item.materialCode + '——' + item.materialName">
              {{ item["materialCode"] + ' —— ' + item["materialName"] }}
            </a-option>
          </a-select>
        </div>
        <div>
          <span>规格:</span>
          <a-select popup-container="html"  class="bacClass" :loading="WLloading4" @search="WLhandleSearch4" v-model="specName"
            :filter-option="false" allow-search allow-clear @focus="WLfocusSel4" style="width:200px">
            <a-option v-for="item in pageData.specList">
              {{ item.specName }}
            </a-option>
          </a-select>
        </div>
        <Toolbar :items="['查询']" @select="Query"></Toolbar>
      </div>
      <a-table :style="{ height: '600px', marginTop: '10px' }"
        :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }" row-key="isTypeIds"
        v-model:selected-keys="selectedRowKeys3" stripe :bordered="true" :scrollbar="true" sticky-header
        :pagination="false" :columns="tableColumns5" :data="dataList">
        <template #picture="{ record }">
          <a-image :src="'/api' + record.picture" style="width:50px;height:50px;" />
        </template>
      </a-table>
      <paginationCopys :page-size-options="pagingList1" :total="listPage.total" show-total show-jumper show-page-size
        @change="PageSize3" @page-size-change="change3" style="justify-content: center; margin-top: 50px"
        :page-size="listPage.size" :current="listPage.page" />
    </a-modal>
  </pageTabelLayout>
</template>

<script lang="ts">
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import emitter from '@/hooks/useEventBus'
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { Form, Message, Modal } from '@arco-design/web-vue'
import { FormInstance } from '@arco-design/web-vue/es/form'
import { String } from 'lodash'
import { baseURL } from '@/api/axios.config'
import axios from 'axios'

import { localeText } from '@/api/aggridZw'
import printJS from 'print-js'
import { pagingList } from '@/api/paging'
import usePermission from '@/store/modules/permission'
import { slicing } from '@/utils/caseFrimAndSecRig'
interface SettlementType {
  applyCode: any
  applyDate: any
  applyDepartment: any
  applyPerson: any
  planDeliveryDate: any
  useDepartment: any
  supplier: any
  auditDate: any
  deliveryDate: any
  applyType: any
  needDepartment: any
  remark: any
  auditState: any
  auditPerson: any
  deleteState: any
  createName: any
  createTime: any
  updateName: any
  updateTime: any
  id: any
  uid: any
  applyCompany: any
  useCompany: any
  applyCompanys: any
  useCompanys: any
  finishState: any
  applyDepartmentId: any
  useDepartmentId: any
}
export default {
  name: 'RequestForm',
  setup() {
    function change1(val: any) {
      pagination.pageSize = val
      doRefresh()
    }

    function PageSize(val: any) {
      pagination.page = val
      doRefresh()
    }
    function doRefresh() {
      pageData.pageLoading = true
      getFirmGroup()
      var startDate = pageData.dropDownDataqszs.startDate
      var endDate = pageData.dropDownDataqszs.endDate
      post({
        url: 'dwPurchase/PurchaseApply/getPage',
        data: {
          page: pagination.page,
          size: pagination.pageSize,
          deleteState: 0,
          applyPerson: pageData.dropDownDataq,
          materialName: isDatas.is5,
          applyType: pageData.dropDownDataqsz,
          applyDepartmentId: pageData.dropDownDataqqq,
          applyCode: pageData.applyCode,
          startDate: compareDate(startDate, endDate) == true ? endDate : startDate,
          endDate: compareDate(startDate, endDate) == true ? startDate : endDate,
          applyCompany: pageData.dropDownDataqqq1,
        },
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            table.handleSuccess(data.list)
            pagination.setTotalSize(data.total)
            gridOption.value.setRowData(data.list)
          }
        })
        .catch(console.log)
        .finally(() => {
          pageData.pageLoading = false
        })
    }
    const compareDate = (dateTime1: any, dateTime2: any) => {
      var formatDate1 = new Date(dateTime1)
      var formatDate2 = new Date(dateTime2)
      if (formatDate1 > formatDate2) {
        return true
      } else {
        return false
      }
    }
    const { selectedRowKeys, onSelectionChange } = useRowSelection()
    const pagination = usePagination(doRefresh)
    const pagination1 = usePagination(doRefreshs)
    const table = useTable()
    const tables = useTable()
    const rowKey = useRowKey('id')
    const tableColumns = useTableColumn([
      {
        title: '申购单号',
        key: 'applyCode',
        dataIndex: 'applyCode',
        width: 150,
      },

      {
        title: '申请日期',
        key: 'applyDate',
        dataIndex: 'applyDate',
        width: 150,
      },
      // {
      //     title: "物料编号",
      //     key: "purchaseNeedCode",
      //     dataIndex: "purchaseNeedCode",
      //     width: 150
      // },
      // {
      //     title: "物料名称",
      //     key: "materialName",
      //     dataIndex: "materialName",
      //     width: 150
      // },
      // {
      //     title: "申购数量",
      //     key: "applyNum",
      //     dataIndex: "applyNum",
      //     width: 150
      // },
      // {
      //     title: "已采购",
      //     key: "purchasedAlready",
      //     dataIndex: "purchasedAlready",
      //     width: 150
      // },
      // {
      //     title: "未采购",
      //     key: "notPurchased",
      //     dataIndex: "notPurchased",
      //     width: 150
      // },
      // {
      //     title: "物料编号",
      //     key: "updateTime",
      //     dataIndex: "updateTime",
      //     width: 150
      // },
      {
        title: '申购类型',
        key: 'applyType',
        dataIndex: 'applyType',
        slotName: 'applyType',
        width: 150,
      },
      {
        title: '申购公司',
        key: 'applyCompanys',
        dataIndex: 'applyCompanys',
        width: 150,
      },
      {
        title: '申购部门',
        key: 'applyDepartment',
        dataIndex: 'applyDepartment',
        width: 150,
      },
      {
        title: '申购人',
        key: 'applyPerson',
        dataIndex: 'applyPerson',
        width: 150,
      },
      {
        title: '采购公司',
        key: 'useCompanys',
        dataIndex: 'useCompanys',
        width: 150,
      },
      {
        title: '采购部门',
        key: 'useDepartment',
        dataIndex: 'useDepartment',
        width: 150,
      },
      // {
      //     title: "采购单号",
      //     key: "applyCode",
      //     dataIndex: "applyCode",
      //     width: 150
      // },
      {
        title: '状态',
        key: 'auditState',
        dataIndex: 'auditState',
        slotName: 'auditState',
        width: 150,
        fixed: 'right',
      },
      {
        title: '审核人',
        key: 'auditPerson',
        dataIndex: 'auditPerson',
        width: 150,
      },
      {
        title: '审核日期',
        key: 'auditDate',
        dataIndex: 'auditDate',
        width: 200,
      },
      {
        title: '修改人',
        key: 'updateName',
        dataIndex: 'updateName',
        width: 150,
      },
      {
        title: '修改日期',
        key: 'updateTime',
        dataIndex: 'updateTime',
        width: 150,
      },
      {
        title: '备注',
        key: 'remark',
        dataIndex: 'remark',
        width: 150,
      },
      {
        title: '驳回原因',
        key: 'rejectCause',
        dataIndex: 'rejectCause',
        width: 150,
      },
      // {
      //     title: "审核人",
      //     key: "auditPerson",
      //     dataIndex: "auditPerson",
      //     width: 150
      // },
      // {
      //     title: "审核时间",
      //     key: "auditDate",
      //     dataIndex: "auditDate",
      //     width: 150
      // },
      // {
      //     title: "修改人",
      //     key: "updateName",
      //     dataIndex: "updateName",
      //     width: 150
      // }

      {
        title: '操作',
        key: 'id',
        slotName: 'action',
        width: 180,
        fixed: 'right',
      },
    ])
    const tableColumns1 = useTableColumn([
      {
        title: '需求单号',
        key: 'needCode',
        dataIndex: 'needCode',
        width: 150,
      },
      {
        title: '物料名称',
        key: 'materialName',
        dataIndex: 'materialName',
        width: 150,
      },
      {
        title: '规格',
        key: 'specName',
        dataIndex: 'specName',
        width: 150,
      },
      // {
      //     title: "批次",
      //     key: "batchName",
      //     dataIndex: "batchName",
      //     width: 150
      // },
      {
        title: '单位',
        key: 'unit',
        dataIndex: 'unit',
        width: 150,
      },
      {
        title: '需求数量',
        key: 'needNum',
        dataIndex: 'needNum',
        width: 150,
      },
      {
        title: '申购单数量',
        key: 'applyNum',
        dataIndex: 'applyNum',
        slotName: 'applyNum',
        width: 150,
      },
    ])
    const tableColumns2 = useTableColumn([
      {
        title: '物料编号',
        key: 'materialCode',
        dataIndex: 'materialCode',
        slotName: 'materialCode',
        width: 150,
      },
      {
        title: '物料名称',
        key: 'materialName',
        dataIndex: 'materialName',
        slotName: 'materialName',
        width: 150,
      },
      {
        title: '规格',
        key: 'specName',
        dataIndex: 'specName',
        slotName: 'specName',
        width: 150,
      },
      {
        title: '需求数量',
        key: 'needNum',
        dataIndex: 'needNum',
        slotName: 'needNum',
        width: 150,
      },
      {
        title: '申购单数量',
        key: 'applyNum',
        dataIndex: 'applyNum',
        slotName: 'applyNum',
        width: 150,
      },
      {
        title: '单位',
        key: 'unit',
        dataIndex: 'unit',
        slotName: 'unit',
        width: 150,
      },
      {
        title: '库存数量',
        key: 'stockNum',
        dataIndex: 'stockNum',
        slotName: 'stockNum',
        width: 150,
      },
      {
        title: '采购部门',
        key: 'useDepartment',
        dataIndex: 'useDepartment',
        slotName: 'useDepartment',
        width: 150,
      },
      {
        title: '备注',
        key: 'remark',
        dataIndex: 'remark',
        slotName: 'remark',
        width: 150,
      },
    ])
    const tableColumns3 = useTableColumn([
      {
        title: '物料编号',
        key: 'materialCode',
        dataIndex: 'materialCode',
        slotName: 'materialCode',
        width: 150,
      },
      {
        title: '物料名称',
        key: 'materialName',
        dataIndex: 'materialName',
        slotName: 'materialName',
        width: 150,
      },
      {
        title: '规格',
        key: 'specName',
        dataIndex: 'specName',
        slotName: 'specName',
        width: 150,
      },
      {
        title: '申购单数量',
        key: 'applyNum',
        dataIndex: 'applyNum',
        slotName: 'applyNum',
        width: 150,
      },
      {
        title: '单位',
        key: 'unit',
        dataIndex: 'unit',
        slotName: 'unit',
        width: 150,
      },
      // {
      //   title: '需求数量',
      //   key: 'needNum',
      //   dataIndex: 'needNum',
      //   slotName: 'needNum',
      //   width: 150,
      // },
      {
        title: '库存数量',
        key: 'stockNum',
        dataIndex: 'stockNum',
        slotName: 'stockNum',
        width: 150,
      },
      {
        title: '备注',
        key: 'remark',
        dataIndex: 'remark',
        slotName: 'remark',
        width: 150,
      },
    ])
    const pageData = reactive<{
      nameList: []
      nameLists: []
      nameListz: any
      nameListq: any
      nameListqs: []
      nameListqqq: any
      nameListqqq1: any
      specifications: any
      DemandNumber: any
      PeopleNeed: any
      showAdd: boolean
      sideTitle: string
      dropDownData: any
      dropDownDataq: any
      dropDownDataqs: any
      dropDownDataqsz: any
      dropDownDataqszs: any
      pageLoading: boolean
      rHeight: any
      dropDownDataqqq: any
      dropDownDataqqq1: any
      tqDataList: any[]
      isDetailsList: any[]
      applyCode: any
      firmList: any[]
      firmListsy: any[]
      bmListsy: any[]
      bmList: any[]
      bmList1: any[]
      title: any
      isShow: boolean
      firmGroupList: []
      loading: boolean
      title1: any
      loading1: boolean
      title2: any
      loading2: boolean
      firmGroupList1: []
      title3: any
      loading3: boolean
      firmGroupList3: []
      title5: any
      title6: any
      loading5: boolean
      loading6: boolean
      dropDownDataq1s: any
      nameListq1: any[]
      dropDownDataqqq1s: any
      dropDownDataqqqs: any
      isDetail: boolean
      isEdit: boolean
      bigName: any[]
      samllName: any[]
      codeList: any[]
      wlNameList: any[]
      specList: any[]
    }>({
      specList: [],
      bigName: [],
      samllName: [],
      codeList: [],
      wlNameList: [],
      isDetail: false,
      isEdit: false,
      bmList: [],
      bmList1: [],
      loading2: false,
      title2: '',
      loading3: false,
      title3: '',
      firmGroupList3: [],
      loading1: false,
      title1: '',
      firmGroupList: [],
      firmGroupList1: [],
      title: '',
      isShow: true,
      loading: false,
      nameList: [],
      nameLists: [],
      nameListz: [],
      nameListq: [],
      nameListqs: [],
      nameListqqq: [],
      nameListqqq1: [],
      specifications: '',
      PeopleNeed: '',
      DemandNumber: '',
      showAdd: false,
      sideTitle: '',
      dropDownData: '',
      dropDownDataq: '',
      dropDownDataqs: '',
      dropDownDataqsz: '',
      dropDownDataqszs: {},
      pageLoading: false,
      rHeight: '',
      dropDownDataqqq: '',
      dropDownDataqqq1: '',
      tqDataList: [],
      isDetailsList: [],
      applyCode: '',
      firmList: [],
      firmListsy: [],
      bmListsy: [],
      title5: '',
      title6: '',
      loading5: false,
      loading6: false,
      dropDownDataq1s: '',
      nameListq1: [],
      dropDownDataqqq1s: '',
      dropDownDataqqqs: '',
    })
    const pageData1 = reactive({
      showAdd: false,
      title: '添加物料',
    })
    //下拉框得到焦点
    const focusSel = () => {
      selCxAll({
        purchaseNeedCode: '',
        auditState: 1,
      })
    }
    //下拉数据
    const options = ref<any>(pageData.nameList)
    const loading = ref(false)
    const handleSearch = (value: any) => {
      if (value) {
        const ob = { purchaseNeedCode: value, auditState: 1 }
        loading.value = true
        window.setTimeout(() => {
          selCxAll(ob)
          options.value = pageData.nameList
          loading.value = false
        }, 200)
      } else {
        options.value = []
      }
    }
    //下拉框查询
    function selCxAll(val: any) {
      post({
        url: 'dwPurchase/purchaseNeed/getDropValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          // console.log(data);
          // (data as string[]).splice(0, 0, "全部");
          pageData.nameList = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    onMounted(() => {
      doRefresh()
      emitter.on('RequestForm', () => {
        doRefresh()
      })
      pageData.rHeight = document.getElementsByClassName('arco-tabs-content')[0]?.clientHeight
      //表格的高
      if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight - 100

        console.log(pageData.rHeight)
      }
      window.addEventListener('resize', () => {
        pageData.rHeight = document.getElementsByClassName('arco-tabs-content')[0]?.clientHeight

        //表格的高
        if (pageData.rHeight !== undefined) {
          pageData.rHeight = pageData.rHeight - 100
        }
      })
      // foucusUseFrim(1)
      // foucusUseFrim(3)
    })
    //查询
    const selectHandler = () => {
      pagination.page = 1
      doRefresh()
    }
    const queryData = reactive({
      clothType: '',
    })
    const addHandler = () => {
      //清空数据
      for (const key in dataForm) {
        if (key == 'id') {
          dataForm.id = null
        } else {
          dataForm[key] = ''
        }
      }
      isDataLists.value = []
      pageData.showAdd = true
      pageData.sideTitle = ''
    }

    const dataForm = reactive<SettlementType>({
      applyCode: '',
      applyDate: '',
      applyDepartment: '',
      applyPerson: '',
      planDeliveryDate: '',
      useDepartment: '',
      supplier: '',
      auditDate: '',
      deliveryDate: '',
      applyType: '',
      needDepartment: '',
      remark: '',
      auditState: '',
      auditPerson: '',
      deleteState: '',
      createName: '',
      createTime: '',
      updateName: '',
      updateTime: '',
      id: null,
      uid: null,
      applyCompany: '',
      useCompany: '',
      applyCompanys: '',
      useCompanys: '',
      finishState: '',
      applyDepartmentId: 0,
      useDepartmentId: 0,
    })
    const formRef = ref<FormInstance>()
    const sideOk = () => {
      formRef.value?.validate().then((err) => {
        if (!err) {
          let list = []
          for (let i = 0; i < pageData.tqDataList.length; i++) {
            var ob = {}
            ob['materialCode'] = pageData.tqDataList[i].materialCode
            ob['materialName'] = pageData.tqDataList[i].materialName
            ob['specName'] = pageData.tqDataList[i].specName
            ob['needNum'] = pageData.tqDataList[i].needNum
            ob['applyNum'] = pageData.tqDataList[i].applyNum
            ob['unit'] = pageData.tqDataList[i].unit
            ob['stockNum'] = pageData.tqDataList[i].stockNum
            ob['useDepartment'] = pageData.tqDataList[i].useDepartment
            ob['remark'] = pageData.tqDataList[i].remark
            ob['useCompany'] = dataForm.useCompany
            list.push(ob)
          }
          for (let i = 0; i < pageData.tqDataList.length; i++) {
            let o: any = pageData.tqDataList[i]
            if (o['applyNum'] == null) {
              Message.warning({
                content: '请将申购单数量填写完',
                duration: 5000,
              })
              pageData.pageLoading = false
              return
            }
          }
          post({
            url: 'dwPurchase/PurchaseApply/update',
            data: {
              ...dataForm,
              purchaseApplyDetail: list,
            },
          }).then((res: any) => {
            if (res.code == 200) {
              Message.success('修改成功')
              pageData.showAdd = false
              doRefresh()
            } else {
              Message.error(res.message)
            }
          })
        }
      })
    }
    const deleteHandler = () => {
      if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请勾选需要审核的数据')
        return
      }
      let ids: any = []
      gridOption.value.getSelectedRows().forEach((item: any) => {
        ids.push(item.id)
      })
      Modal.confirm({
        title: '系统提示',
        content: '确认删除选中的数据?',
        onOk() {
          post({
            url: 'dwPurchase/PurchaseApply/delete',
            data: ids,
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              Message.success({
                content: '删除成功',
                duration: 5000,
              })
            } else {
              Message.error({
                content: message,
                duration: 5000,
              })
            }
            doRefresh()
          })
        },
      })
    }

    const editHandler = (record: any) => {
      getFirmGroup()
      for (var key in record) {
        dataForm[key] = record[key]
      }
      if (record.updateState == 0) {
        //拿到此页面的详情
        post({
          url: 'dwPurchase/PurchaseApply/getDetail',
          data: {
            page: 1,
            size: pagination.pageSize,
            // "auditState": 0,
            // "submitState": 0,
            applyCode: record['applyCode'],
            rejectState: 0,
          },
        }).then(({ data, code }: any) => {
          if (code === 200) {
            getBmGroup(dataForm.applyCompany)
            getBmGroup1(dataForm.useCompany)
            pageData.tqDataList = data[0]['purchaseApplyDetail']
            gridOptionsz111.value.setRowData(data[0]['purchaseApplyDetail'])
            isDataListss.value.forEach((item: any) => {
              item['isTypeIds'] = isTypeIds++
            })
            ckNum()
          } else {
            Message.error({
              content: '查询失败！',
              duration: 5000,
            })
          }
        })
        pageData.sideTitle = '修改申购单'
        pageData.showAdd = true
      } else if (record.updateState == 1) {
        post({
          url: 'dwPurchase/PurchaseApply/getDetail',
          data: {
            page: 1,
            size: pagination.pageSize,
            applyCode: record['applyCode'],
            rejectState: 0,
          },
        }).then(({ data, code }: any) => {
          if (code === 200) {
            getBmGroup(dataForm.applyCompany)
            getBmGroup1(dataForm.useCompany)
            isDataListss.value = data[0]['purchaseApplyDetail']
            isDtasZh.value = true
            isDataListss.value.forEach((item: any) => {
              item['isTypeIds'] = isTypeIds++
            })
            ckNum2()
          } else {
            Message.error({
              content: '查询失败！',
              duration: 5000,
            })
          }
        })
      }
    }
    //判断是否填写了中文
    const isChiese = (value: string, cb: Function) => {
      return new Promise<void>((resolve) => {
        if (window.encodeURI(value).indexOf('%') !== -1) {
          cb('填写的值不能包含中文！')
        }
        resolve()
      })
    }
    //input离开焦点 将小写转大写
    const inputBlur = () => {
      // dataForm.settlementCode = dataForm.settlementCode.toUpperCase();
    }
    //导出
    const exports = () => {
      if (selectedRowKeys.value.length === 0) {
        Message.error('请先勾选')
        return
      } else {
        //将表头拼接出来
        let head =
          '<th>类型编号</th><th>类型名称</th><th>备注</th><th>创建人</th><th>创建时间</th><th>最后修改人</th><th>最后修改时间</th>'
        //拿到当前表格数据与勾选的行做筛选

        let nowRow = table.dataList.filter(function (o) {
          return selectedRowKeys.value.indexOf(o['id']) !== -1
        })
        let body = ''
        nowRow.forEach(function (o) {
          body += '<tr><td>' + o['productTypeCode'] + '</td>'
          body += '<td>' + o['productTypeName'] + '</td>'
          body += '<td>' + o['remark'] + '</td>'
          body += '<td>' + o['createName'] + '</td>'
          body += '<td>' + o['createTime'] + '</td>'
          body += '<td>' + o['updateName'] + '</td>'
          body += '<td>' + o['updateTime'] + '</td>'
          body += '</tr>'
        })
        tableToXlsx(head, '产品类型', body)
        console.log(table)
      }
    }

    function tableToXlsx(head: any, filename: any, body: any) {
      const uri = 'data:application/vnd.ms-excel;base64,',
        template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`

      const a = document.createElement('a')
      a.href = uri + window.btoa(unescape(encodeURIComponent(template)))
      a.download = filename
      a.click()
      document.removeChild(a)
    }
    //模板下载
    const downloadHandler = () => {
      window.open(baseURL + 'excel')
    }
    //导入
    const importHandler = () => {
      const inputEle: HTMLInputElement = document.createElement('input')
      inputEle.type = 'file'
      inputEle.id = 'fileUploadExcel'
      inputEle.accept =
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
      inputEle.addEventListener('change', (e) => {
        const formData = new FormData()
        if (inputEle.files !== null) {
          formData.append('file', inputEle.files[0] || '')
        } else {
          Message.warning('未选择文件！')
          return
        }
        pageData.pageLoading = true
        axios
          .post(baseURL + '/product/productType/analyseProductTypeModelModel', formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
              token: sessionStorage.getItem('USER-TOKEN-KEY'),
            },
          })
          .then((result) => {
            if (result.data['code'] === 200) {
              Message.success('导入成功')
            } else {
              Message.error(result.data.message)
            }
          })
          .finally(() => {
            pageData.pageLoading = false
            doRefresh()
          })
      })
      inputEle.click()
    }

    const tjWl = () => {
      for (let item in isDataList) {
        isDataList[item] = ''
      }
      pageData1.showAdd = true
    }
    const isDataList = reactive({
      materialName: '',
      specName: '',
      batchName: '',
      unit: '',
      needNum: '',
      applyNum: '',
    })

    //下拉框得到焦点
    const focusSels = () => {
      selCxAll({ materialName: '', auditState: 1 })
    }
    //下拉数据
    const optionss = ref<any>(pageData.nameLists)
    const loadings = ref(false)
    const handleSearchs = (value: any) => {
      if (value) {
        const ob = { materialName: value, auditState: 1 }
        loadings.value = true
        window.setTimeout(() => {
          selCxAlls(ob)
          optionss.value = pageData.nameLists
          loadings.value = false
        }, 200)
      } else {
        optionss.value = []
      }
    }
    //下拉框查询
    function selCxAlls(val: any) {
      post({
        url: 'dwPurchase/MaterialInfo/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          console.log(data)
          // (data as string[]).splice(0, 0, "全部");
          pageData.nameLists = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    // let isDataLists:any = ref([])
    let isDataLists: any = ref([])
    const sideOks = () => {
      if (isDataList.materialName == '') {
        Message.error('物料名称不能为空')
        return
      }
      // let objData = {}
      // objData = Object.assign(isDataList)
      // let objDatas = JSON.parse(JSON.stringify(objData))
      if (isDataLists.value.length === 0) {
        isDataLists.value.push(JSON.parse(JSON.stringify(isDataList)))
        pageData1.showAdd = false
      } else {
        let isAdd = true
        isDataLists.value.forEach((item: any) => {
          //   if(item.materialCode == isDataList.materialCode){
          //     Message.error('物料编号不能重复')
          //   }else
          if (item.materialName == isDataList.materialName) {
            Message.error('物料名称不能重复')
            isAdd = false
          }
        })
        if (isAdd) {
          isDataLists.value.push(JSON.parse(JSON.stringify(isDataList)))
          pageData1.showAdd = false
        }
      }
    }

    //下拉框得到焦点
    const focusSelz = () => {
      selCxAllz({ applyType: '' })
    }
    //下拉数据
    const optionsz = ref<any>(pageData.nameListz)
    const loadingz = ref(false)
    const handleSearchz = (value: any) => {
      if (value) {
        const ob = { applyType: value }
        loadingz.value = true
        window.setTimeout(() => {
          selCxAllz(ob)
          optionsz.value = pageData.nameListz
          loadingz.value = false
        }, 200)
      } else {
        optionsz.value = []
      }
    }
    //下拉框查询
    function selCxAllz(val: any) {
      post({
        url: 'dwPurchase/PurchaseApply/getFieldValueGroup',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          console.log(data)
          // (data as string[]).splice(0, 0, "全部");
          pageData.nameListz = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    let selectedRowKeys1 = ref()
    const cancelsDel = () => {
      if (pageData1.showAdd) {
        return
      } else {
        pageData.showAdd = false
      }
    }

    const scWl = () => {
      if (selectedRowKeys1.value == 0) {
        Message.error('请选择要删除的数据')
        return
      }
      console.log(isDataLists.value)
      console.log(selectedRowKeys1.value)
      if (selectedRowKeys1.value.length > 1) {
        // isDataLists.value.forEach((item:any,index:any)=>{
        //     selectedRowKeys1.value.forEach((items:any,indexs:any)=>{
        //         if(item.materialName == items){
        //             isDataLists.value.splice(index,1)
        //             selectedRowKeys1.value.splice(indexs,1)
        //         }
        //     })
        // })
        selectedRowKeys1.value.forEach((item: any, index: any) => {
          console.log(item)
          isDataLists.value.forEach((items: any, indexs: any) => {
            if (item == items.needCode) {
              // selectedRowKeys1.value.splice(index,1)
              isDataLists.value.splice(indexs, 1)
            }
          })
        })
        if (selectedRowKeys1.value.length > isDataLists.value.length) {
          selectedRowKeys1.value = []
        }
      } else {
        isDataLists.value.some((item: any, index: any) => {
          if (selectedRowKeys1.value == item.needCode) {
            isDataLists.value.splice(index, 1)
            selectedRowKeys1.value = []
          }
        })
      }
    }
    //下拉框得到焦点
    const focusSelq = () => {
      selCxAllq({ applyPerson: '' })
    }
    //下拉数据
    const optionsq = ref<any>(pageData.nameListq)
    const loadingq = ref(false)
    const handleSearchq = (value: any) => {
      if (value) {
        const ob = { applyPerson: value }
        loadingq.value = true
        window.setTimeout(() => {
          selCxAllq(ob)
          optionsq.value = pageData.nameListq
          loadingq.value = false
        }, 200)
      } else {
        optionsq.value = []
      }
    }
    //下拉框查询
    function selCxAllq(val: any) {
      post({
        url: 'dwPurchase/PurchaseApply/getFieldValueGroup',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          console.log(data)
          // (data as string[]).splice(0, 0, "全部");
          pageData.nameListq = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //下拉框得到焦点
    const focusSelqs = () => {
      selCxAllqs({ materialName: '', auditState: 1 })
    }
    //下拉数据
    const optionsqs = ref<any>(pageData.nameListqs)
    const loadingqs = ref(false)
    const handleSearchqs = (value: any) => {
      if (value) {
        const ob = { materialName: value, auditState: 1 }
        loadingqs.value = true
        window.setTimeout(() => {
          selCxAllq(ob)
          optionsqs.value = pageData.nameListqs
          loadingqs.value = false
        }, 200)
      } else {
        options.value = []
      }
    }
    //下拉框查询
    function selCxAllqs(val: any) {
      post({
        url: 'dwPurchase/MaterialInfo/getFieldValueGroup',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          console.log(data)
          // (data as string[]).splice(0, 0, "全部");
          pageData.nameListqs = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    // const auditSh = () => {

    // }
    const auditStates = () => {
      if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请勾选需要审核的数据')
        return
      }
      for (let i = 0; i < gridOption.value.getSelectedRows().length; i++) {
        if (gridOption.value.getSelectedRows()[i].auditState == 0) {
          Message.error('该订单还未审核')
          return
        }
        if (gridOption.value.getSelectedRows()[i].auditState == 2) {
          Message.error('该订单已被驳回')
          return
        }
      }
      let ids: any = []
      gridOption.value.getSelectedRows().forEach((item: any) => {
        ids.push({
          id: item.id,
        })
      })
      Modal.confirm({
        title: '系统提示',
        content: '是否反审此订单',
        onOk() {
          post({
            url: 'dwPurchase/PurchaseApply/setAudit',
            data: {
              id: ids,
              auditState: 0,
            },
          }).then((res: any) => {
            if (res.code === 200) {
              doRefresh()
              selectedRowKeys.value = []
              emitter.emit('shauxings')
              Message.success('反审成功')
            } else {
              Message.error(res.message)
            }
          })
        },
      })
      // console.log(val)
    }
    emitter.on('shuaxiong', () => {
      doRefresh()
    })
    let visible = ref(false)
    const tqxqd = () => {
      visible.value = true
    }
    const handleBeforeOk = () => {
      if (selectedRowKeys.value.length == 0) {
        visible.value = true
        Message.error('请勾选数据')
        return
      }
      selectedRowKeys.value.forEach((item: any) => {
        tables.dataList.forEach((items: any) => {
          if (item == items.id) {
            isDataLists.value.push({
              needCode: items.purchaseNeedCode,
              materialName: items.materialName,
              specName: items.specName,
              batchName: items.batchName,
              unit: items.unit,
              needNum: items.needNum,
            })
          }
        })
      })
    }
    function doRefreshs() {
      post({
        url: 'dwPurchase/purchaseNeed/getPage',
        data: {
          page: pagination1.page,
          size: pagination1.pageSize,
          deleteState: 0,
          auditState: 1,
        },
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            tables.handleSuccess(data.list)
            pagination1.setTotalSize(data.total)
          }
        })
        .catch(console.log)
    }
    const selectSh = () => {
      pagination.page = 1
      doRefreshs()
    }
    const tableColumnsz = useTableColumn([
      {
        title: '需求部门',
        key: 'needDepartment',
        dataIndex: 'needDepartment',
        width: 150,
      },
      {
        title: '需求单号',
        key: 'purchaseNeedCode',
        dataIndex: 'purchaseNeedCode',
        width: 150,
      },
      {
        title: '开单日期',
        key: 'needCreateDate',
        dataIndex: 'needCreateDate',
        width: 150,
      },
      {
        title: '需求人',
        key: 'needPerson',
        dataIndex: 'needPerson',
        width: 150,
      },
      {
        title: '需求类型',
        key: 'needType',
        dataIndex: 'needType',
        width: 150,
      },
      {
        title: '仓库名称',
        key: 'warehouseName',
        dataIndex: 'warehouseName',
        width: 150,
      },
      // {
      //     title: "物料编号",
      //     key: "updateTime",
      //     dataIndex: "updateTime",
      //     width: 150
      // },
      {
        title: '物料名称',
        key: 'materialName',
        dataIndex: 'materialName',
        width: 150,
      },
      {
        title: '规格',
        key: 'specName',
        dataIndex: 'specName',
        width: 150,
      },
      // {
      //     title: "批次",
      //     key: "batchName",
      //     dataIndex: "batchName",
      //     width: 150
      // },
      {
        title: '申购单号',
        key: 'applyCode',
        dataIndex: 'applyCode',
        width: 150,
      },
      {
        title: '确认情况',
        key: 'confirmState',
        dataIndex: 'confirmState',
        slotName: 'confirmState',
        width: 150,
      },
      {
        title: '单位',
        key: 'unitName',
        dataIndex: 'unitName',
        width: 150,
      },
      {
        title: '数量',
        key: 'needNum',
        dataIndex: 'needNum',
        width: 150,
      },
      {
        title: '备注',
        key: 'remark',
        dataIndex: 'remark',
        width: 150,
      },
      {
        title: '采购部门',
        key: 'useDepartment',
        dataIndex: 'useDepartment',
        width: 150,
      },
      {
        title: '需求说明',
        key: 'needInstruction',
        dataIndex: 'needInstruction',
        width: 150,
      },
      {
        title: '是否审核',
        key: 'auditState',
        dataIndex: 'auditState',
        slotName: 'auditState',
        width: 150,
      },
      {
        title: '审核人',
        key: 'auditPerson',
        dataIndex: 'auditPerson',
        width: 150,
      },
      {
        title: '审核时间',
        key: 'auditDate',
        dataIndex: 'auditDate',
        width: 150,
      },
      {
        title: '修改人',
        key: 'updateName',
        dataIndex: 'updateName',
        width: 150,
      },
    ])
    const headerShow = ref<boolean>(true)

    //下拉框得到焦点
    const focusSelqqq = () => {
      selCxAllqqq({ applyDepartment: '' })
    }
    //下拉数据
    const optionsqqq = ref<any>(pageData.nameListqqq)
    const loadingqqq = ref(false)
    const handleSearchqqq = (value: any) => {
      if (value) {
        const ob = { applyDepartment: value }
        loadingqqq.value = true
        window.setTimeout(() => {
          selCxAllqqq(ob)
          optionsqqq.value = pageData.nameListqqq
          loadingqqq.value = false
        }, 200)
      } else {
        optionsqqq.value = []
      }
    }
    //下拉框查询
    function selCxAllqqq(val: any) {
      post({
        url: 'dwPurchase/PurchaseApply/getFieldValueGroup',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          console.log(data)
          // (data as string[]).splice(0, 0, "全部");
          pageData.nameListqqq = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    //下拉框得到焦点
    const focusSelqqq1 = () => {
      selCxAllqqq1({ applyCompanys: '' })
    }
    //下拉数据
    const optionsqqq1 = ref<any>(pageData.nameListqqq1)
    const loadingqqq1 = ref(false)
    const handleSearchqqq1 = (value: any) => {
      if (value) {
        const ob = { applyCompanys: value }
        loadingqqq1.value = true
        window.setTimeout(() => {
          selCxAllqqq1(ob)
          optionsqqq1.value = pageData.nameListqqq1
          loadingqqq1.value = false
        }, 200)
      } else {
        optionsqqq1.value = []
      }
    }
    //下拉框查询
    function selCxAllqqq1(val: any) {
      post({
        url: 'dwPurchase/PurchaseApply/getFieldValueGroup',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          console.log(data)
          // (data as string[]).splice(0, 0, "全部");
          pageData.nameListqqq1 = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //提交需求单
    const submit = (num: any) => {
      if (selectedRowKeys.value.length === 0) {
        Message.warning({
          content: '请先勾选',
          duration: 5000,
        })
        return
      }
      let list = []
      let idList: any = []
      table.dataList.forEach(function (o: any) {
        if (selectedRowKeys.value.includes(o['uid'])) {
          idList.push(o['id'])
        }
      })
      for (let i = 0; i < idList.length; i++) {
        var ob = {}
        ob['id'] = idList[i]
        ob['confirmState'] = num
        list.push(ob)
      }
      post({
        url: 'dwPurchase/purchaseNeed/audit',
        data: list,
      }).then((res: any) => {
        if (res.code === 200) {
          doRefresh()
          selectedRowKeys.value = []
        } else {
          Message.error({
            content: res.message,
            duration: 5000,
          })
        }
      })
    }
    // 修改弹窗删除物料
    const delRow = () => {
      if (selectedRowKeys1.value.length == 0) {
        Message.warning('请先勾选')
        return
      }
      pageData.tqDataList = pageData.tqDataList.filter(function (o: any) {
        return selectedRowKeys1.value.includes(o['uid'])
      })
    }
    //详情
    //查看详情按钮
    const visible1 = ref(false)
    const cxDetails = (record: any) => {
      visible1.value = true
      post({
        url: 'dwPurchase/PurchaseApply/getDetail',
        data: {
          page: 1,
          size: pagination.pageSize,
          // "auditState": 0,
          // "submitState": 0,
          applyCode: record['applyCode'],
          rejectState: 0,
        },
      }).then(({ data, code }: any) => {
        if (code === 200) {
          pageData.isDetailsList = data[0]['purchaseApplyDetail']
          ckNum3()
          //    dataForm.finishState === 0 ? "已完结":"部分完结"
          // gridOptionsz111.value.getSelectedRows().map((o: any) => { return o.finishState  === 0 ? "已完结":"部分完结"})
          //    gridOptionsz111.value.setRowData(data[0]['finishState'] === 0 ? "已完结":"部分完结");
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    const xuQiuWl = (val: any) => {
      cxs({ materialName: val }, 5)
    }
    const xuQiuWls = () => {
      cxs({ materialName: '' }, 5)
    }
    function cxs(val: any, num: Number) {
      post({
        url: 'dwPurchase/PurchaseApplyDetail/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          switch (num) {
            case 5:
              isDatas.is5Array = data
              break
            case 6:
              isDatas.is6Array = data
              break
          }
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    const isDatas: any = reactive({
      is5: '',
      is5Array: [],
    })
    //拿到所有公司
    // const foucusUseFrim = (num: any) => {
    //   let ob = {}
    //   if (num == 1) {
    //     ob['firmName'] = ''
    //     ob['department'] = ''
    //     // ob['firmTypeId'] = ""
    //   }
    //   if (num == 2) {
    //     if (dataForm.applyCompany !== '' && dataForm.applyCompany !== undefined) {
    //       let list = pageData.firmList.filter(function (o: any) {
    //         return o['id'] == dataForm.applyCompany
    //       })
    //       if (list.length > 0) {
    //         ob['firmName'] = list[0]['firmName']
    //         dataForm.applyCompanys = list[0]['typeName']
    //           ? list[0]['typeName'] + '-' + list[0]['firmName']
    //           : list[0]['firmName']
    //         ob['department'] = list[0]['department']
    //         ob['firmTypeId'] = list[0]['firmTypeId']
    //       }
    //     } else {
    //       Message.warning({
    //         content: '请先选择申购公司',
    //         duration: 5000,
    //       })
    //     }
    //   }
    //   if (num == 3) {
    //     ob['firmName'] = ''
    //     ob['department'] = ''
    //     // ob['firmTypeId'] = ""
    //   }
    //   if (num == 4) {
    //     if (dataForm.useCompany !== '' && dataForm.useCompany !== undefined) {
    //       let list = pageData.firmList.filter(function (o: any) {
    //         return o['id'] == dataForm.useCompany
    //       })
    //       if (list.length > 0) {
    //         ob['firmName'] = list[0]['firmName']
    //         dataForm.useCompanys = list[0]['typeName']
    //           ? list[0]['typeName'] + '-' + list[0]['firmName']
    //           : list[0]['firmName']
    //         ob['department'] = list[0]['department']
    //         ob['firmTypeId'] = list[0]['firmTypeId']
    //       }
    //     } else {
    //       Message.warning({
    //         content: '请先选择采购公司',
    //         duration: 5000,
    //       })
    //     }
    //   }
    //   //搜索框公司
    //   if (num == 5) {
    //     ob['firmName'] = ''
    //     ob['department'] = ''
    //   }
    //   if (num == 6) {
    //     if (pageData.dropDownDataqqq1 !== '' && pageData.dropDownDataqqq1 !== undefined) {
    //       let list = pageData.nameListq1.filter(function (o: any) {
    //         return o['id'] == pageData.dropDownDataqqq1
    //       })
    //       ob['firmName'] = list[0]['firmName']
    //       pageData.dropDownDataqqq1s = list[0]['typeName']
    //         ? list[0]['typeName'] + '-' + list[0]['firmName']
    //         : list[0]['firmName']
    //       ob['department'] = list[0]['department']
    //       ob['firmTypeId'] = list[0]['firmTypeId']
    //     } else {
    //       Message.warning({
    //         content: '请先选择需求公司',
    //         duration: 5000,
    //       })
    //     }
    //   }
    //   getFrimList(ob, num)
    // }
    const options2 = ref(pageData.firmList)
    const loading2 = ref(false)
    const handleSearch2 = (value: any) => {
      if (value) {
        loading2.value = true
        options2.value = pageData.firmList
        loading2.value = false
      } else {
        options2.value = []
      }
    }
    // function getFrimList(ob: any, nums: any) {
    //   post({
    //     url: 'org/firmGroup/getFirmInfoByMap',
    //     data: ob,
    //   }).then((result: any) => {
    //     if (result.code === 200) {
    //       if (nums == 1) {
    //         pageData.firmList = result.data
    //       }
    //       if (nums == 2) {
    //         pageData.bmList = result.data
    //       }
    //       if (nums == 3) {
    //         pageData.firmListsy = result.data
    //       }
    //       if (nums == 4) {
    //         pageData.bmListsy = result.data
    //       }
    //       if (nums == 5) {
    //         pageData.nameListq1 = result.data
    //       }
    //       if (nums == 6) {
    //         pageData.nameListq = result.data
    //       }
    //     } else {
    //       Message.error(result.message)
    //     }
    //   })
    // }
    //公司改变 部门为=空
    const changeGs = (num: any) => {
      if (num == 1) {
        dataForm.applyDepartment = ''
      } else {
        dataForm.useDepartment = ''
      }
    }
    const gridOption = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
    }
    let tc: any[] = tableColumns.map((o) => {
      let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
        tooltipField: o.key,
      }
      if (o.slotName === 'action') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj['lockPosition'] = 'right'
        obj['width'] = 150
        obj['cellRenderer'] = {
          template: `
                    <a-space size="medium">
                        <el-button v-if="(isDtas.auditState == 0) && e " style="color:#165dff;" link
                                @click="a1" >
                              
                                修改
                            </el-button>
                            <el-button v-if="(isDtas.auditState != 0) && e2" disabled  type="info"  link>
                             
                                修改
                            </el-button>
                            <el-button  style="color:#165dff;" link @click="a2" v-if="f">
                                详情
                            </el-button>
                    </a-space>

                    `,
          setup(props: any) {
            const isDtas = ref(props.params.data)
            const a1 = () => {
              editHandler(props.params.data)
            }
            const a2 = () => {
              cxDetails(props.params.data)
            }
            return {
              e: pageData.isEdit,
              e2: pageData.isEdit,
              f: pageData.isDetail,
              a1,
              a2,
              isDtas,
            }
          },
        }
      }
      if (o.slotName === 'auditState') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj['lockPosition'] = 'right'
        obj['width'] = 120
        obj['cellRenderer'] = {
          template: `<el-tag v-if="isDatas.auditState == 0"  type="warning">待审核
                            </el-tag>
                            <el-tag v-if="isDatas.auditState == 1" type="success">审核通过
                            </el-tag>
                            <el-tag v-if="isDatas.auditState == 2" type="info">审核驳回
                            </el-tag>`,
          setup(props: any) {
            const isDatas = ref(props.params.data)
            return {
              isDatas,
            }
          },
        }
      }
      if (o.slotName === 'applyType') {
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '0'
          ? '加急'
          : params.value == '1'
          ? '计划'
          : params.value == '2'
          ? '临时'
          : ''
      },
    }
        obj['cellRenderer'] = {
          template: `
            <a-space>
                          <div style="color:red;font-weight: bolder;" v-if="isDatas.applyType == '0'">
                            加急
                          </div>
                          <div style="color:green;font-weight: bolder;" v-if="isDatas.applyType == '1'">
                           计划
                          </div>
                          <div style="color:blue;font-weight: bolder;" v-if="isDatas.applyType == '2'">
                            临时
                          </div>
                          </a-space>`,
          setup(props: any) {
            const isDatas = ref(props.params.data)
            return {
              isDatas,
            }
          },
        }
      }
      return obj
    })

    let a = [
      {
        showRowGroup: 'hide_def',
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: 'left',
      },
    ]
    tc = a.concat(tc)

    const gridOptionsz111 = ref()
    const gridReadysz111 = (params: any) => {
      gridOptionsz111.value = params.api
    }
    const defaultColDefsz111 = {
      sortable: true,
      resizable: true,
      filter: true,
      flex: 1,
    }
    let tcsz111: any[] = tableColumns2.map((o) => {
      let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
        tooltipField: o.key,
      }
      if (o.slotName === 'applyNum') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj['cellRenderer'] = {
          template: `
                        <a-input-number v-model="isDtas.applyNum" class="input-demo bacClass" :min="0" :max="10000000000000000000" />
                    `,
          setup(props: any) {
            const isDtas = ref(props.params.data)
            return {
              isDtas,
            }
          },
        }
      }
      if (o.slotName === 'finishState') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj['cellRenderer'] = {
          template: `<div>{{val}}</div>`,
          setup(props: any) {
            let val = ref()
            val.value =
              props.params.data.finishState == 0
                ? '已完结'
                : props.params.data.finishState == 1
                  ? '部分完结'
                  : '未完结'
            return {
              val,
            }
          },
        }
      }
      // if (o.slotName === 'oweNum') {
      //   obj['resizable'] = false
      //   obj['filter'] = false
      //   obj['sortable'] = false
      //   obj['cellRenderer'] = {
      //     template: `<div>{{val}}</div>`,
      //     setup(props: any) {
      //       let val = ref()
      //       val.value = props.params.data.oweNum
      //       return {
      //         val,
      //       }
      //     },
      //   }
      // }
      if (o.slotName === 'remark') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj['lockPosition'] = 'right'
        obj['cellRenderer'] = {
          template: `
                        <a-input class="bacClass" v-model="isDtas.remark" />
                    `,
          setup(props: any) {
            const isDtas = ref(props.params.data)
            return {
              isDtas,
            }
          },
        }
      }
      return obj
    })

    let asz111 = [
      {
        showRowGroup: 'hide_def',
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: 'left',
      },
    ]
    tcsz111 = asz111.concat(tcsz111)

    const isDtasZh = ref(false)

    const sideOkss = () => {
      if (
        dataForm['applyDepartment'] == '' ||
        dataForm['applyType'] == '' ||
        dataForm['planDeliveryDate'] == ''
      ) {
        Message.warning({
          content: '请将必填字段填写完',
          duration: 5000,
        })
        return
      }
      for (let i = 0; i < isDataListss.value.length; i++) {
        let o: any = isDataListss.value[i]
        if (o['applyNum'] == null) {
          Message.warning({
            content: '请将申购单数量填写完',
            duration: 5000,
          })
          return
        }
      }
      let condition = isDataListss.value.some((item: { materialCode: string }, index: number) => {
        if (index !== 0) {
          return item.materialCode === isDataListss.value[0].materialCode
        }
      })
      if (condition) {
        Message.warning({
          content: '不能添加同样的物料',
          duration: 5000,
        })
        return
      }
      let list = []
      for (let i = 0; i < isDataListss.value.length; i++) {
        var ob = {}
        ob['materialCode'] = isDataListss.value[i].materialCode
        ob['materialName'] = isDataListss.value[i].materialName
        ob['specName'] = isDataListss.value[i].specName
        ob['applyNum'] = isDataListss.value[i].applyNum
        ob['unit'] = isDataListss.value[i].unit
        ob['stockNum'] = isDataListss.value[i].stockNum
        ob['remark'] = isDataListss.value[i].remark
        ob['useCompany'] = dataForm.useCompany
        list.push(ob)
      }
      post({
        url: 'dwPurchase/PurchaseApply/updateInfo',
        data: {
          ...dataForm,
          purchaseApplyDetail: list,
        },
      }).then((res: any) => {
        if (res.code == 200) {
          for (let item in dataForm) {
            dataForm[item] = ''
          }
          selectedRowKeys1.value = []
          doRefreshs()
          Message.success({
            content: '修改成功!',
            duration: 5000,
          })
          doRefresh()
          isDtasZh.value = false
        } else {
          Message.error(res.message)
        }
      })
    }
    const cancelDelets = () => {
      for (let item in dataForm) {
        dataForm[item] = ''
      }
      isDataListss.value = []
      isDtasZh.value = false
    }
    let isTypeIds = 0
    const isDataListss: any = ref([])
    const tjWls = () => {
      // isDataListss.value.unshift({
      //   materialName: '',
      //   specName: '',
      //   unit: '',
      //   needNum: 0,
      //   applyNum: 0,
      //   stockNum: 0,
      //   remark: '',
      //   isTypeIds: isTypeIds++,
      // })
      visibleWl.value = true
    }

    const scWls = () => {
      if (selectedRowKeys1.value.length > 1) {
        // isDataLists.value.forEach((item:any,index:any)=>{
        //     selectedRowKeys1.value.forEach((items:any,indexs:any)=>{
        //         if(item.materialName == items){
        //             isDataLists.value.splice(index,1)
        //             selectedRowKeys1.value.splice(indexs,1)
        //         }
        //     })
        // })
        selectedRowKeys1.value.forEach((item: any, index: any) => {
          isDataListss.value.forEach((items: any, indexs: any) => {
            if (item == items.isTypeIds) {
              // selectedRowKeys1.value.splice(index,1)
              isDataListss.value.splice(indexs, 1)
            }
          })
        })
        if (selectedRowKeys1.value.length > isDataListss.value.length) {
          selectedRowKeys1.value = []
        }
      } else {
        isDataListss.value.some((item: any, index: any) => {
          if (selectedRowKeys1.value == item.isTypeIds) {
            isDataListss.value.splice(index, 1)
            selectedRowKeys1.value = []
          }
        })
      }
    }

    const isWlCodeList: any = ref([])
    const hqWlCode = () => {
      wlCode({ materialCode: '', auditState: 1 })
    }
    const hqWlCodes = (val: any) => {
      wlCode({ materialCode: val, auditState: 1 })
    }
    function wlCode(val: any) {
      post({
        url: 'dwPurchase/MaterialInfo/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          // (data as string[]).splice(0, 0, "全部");
          isWlCodeList.value = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    const hqWlCodezs = (record: any) => {
      record.specName = ''
      record.unit = ''
      record.materialName = ''
      post({
        url: 'dwPurchase/MaterialInfo/getList',
        data: {
          materialCode: record.materialCode,
        },
      }).then((res: any) => {
        if (res.code == 200) {
          // ckNum2()
          record.specName = res.data[0].specName
          record.unit = res.data[0].unit
          record.materialName = res.data[0].materialName
        }
        ckNum()
        ckNum2()
        ckNum3()
      })
    }
    //下拉框得到焦点
    const focusSelsm = () => {
      selCxAllsm({ materialName: '', auditState: 1 })
    }
    //下拉数据
    const optionssm: any = ref()
    const loadingsm = ref(false)
    const handleSearchsm = (value: any) => {
      if (value) {
        const ob = { materialName: value, auditState: 1 }
        loadings.value = true
        window.setTimeout(() => {
          selCxAllsm(ob)
          loadingsm.value = false
        }, 200)
      } else {
        optionssm.value = []
      }
    }
    //下拉框查询
    function selCxAllsm(val: any) {
      post({
        url: 'dwPurchase/MaterialInfo/getFieldValue',
        data: val,
      }).then(({ data, code, message }: any) => {
        if (code === 200) {
          optionssm.value = data
        } else {
          Message.error({
            content: message,
            duration: 5000,
          })
        }
      })
    }
    const handles = (record: any) => {
      record.specName = ''
      record.unit = ''
      record.materialCode = ''
      post({
        url: 'dwPurchase/MaterialInfo/getList',
        data: {
          materialName: record.materialName,
        },
      }).then((res: any) => {
        if (res.code == 200) {
          // ckNum2()
          record.specName = res.data[0].specName
          record.unit = res.data[0].unit
          record.materialCode = res.data[0].materialCode
        }
        ckNum()
        ckNum2()
        ckNum3()
      })
    }
    //回车查询
    const huiche = () => {
      selectHandler()
    }
    const typeChange = () => {
      doRefresh()
    }
    const localeText1: any = ref(localeText)
    const total = ref(10)
    let dataTime = ref([])
    let dataTime2 = ref([])
    let idDtaDy: any = ref([])
    let visiblecg = ref(false)
    let idDtaDys: any = ref({
      purchaseType: '',
      applyDate: '',
      applyCode: '',
      materialCode: '',
      createName: '',
      auditPerson: '',
      applyPerson: '',
    })
    // let num: any = ref({
    //     total: 0,
    // })
    //打印 申购单
    const dayCogu = () => {
      if (gridOption.value.getSelectedRows().length == 0) {
        Message.error('请先勾选')
        return
      }
      if (gridOption.value.getSelectedRows().length > 1) {
        Message.error('只能勾选一条')
        return
      }
      let uid: any = []
      table.dataList.forEach((item: any, index: any) => {
        if (gridOption.value.getSelectedRows()[0].id == item.id) {
          uid.push(item.uid)
          idDtaDys.value = item
          dataTime.value = item.applyDate.split(' ')
          dataTime2.value = item.createTime.split(' ')
          if (item.auditState == 1) {
            uid.forEach((item: any) => {
              post({
                url: '/dwPurchase/PurchaseApply/getListId',
                data: {
                  id: gridOption.value.getSelectedRows()[0].id,
                  rejectState: 0,
                },
              }).then((res: any) => {
                if (res.code == 200) {
                  idDtaDy.value = res.data.list
                  total.value = res.data.total
                }
                visiblecg.value = true
              })
            })
          } else {
            Message.error('未审核或审核驳回')
            return
          }
        }
      })
    }
    const print = () => {
      printJS({
        printable: 'request2',
        type: 'html',
        targetStyles: ['*'],
      })
    }
    //取消打印
    const no = () => {
      visiblecg.value = false
    }
    const pagingList1: any = ref(pagingList)

    // 获取公司列表
    const getFirmGroup = () => {
      post({
        url: 'org/baCompany/getTreeCompanyByUser',
        data: {},
      }).then(({ code, data }) => {
        if (code === 200) {
          pageData.firmGroupList = data
          pageData.firmGroupList1 = data
          pageData.nameListq1 = data
        }
      })
    }

    let casOb = ref()
    const casOb1 = ref()
    //公司改变
    const cascaderChange = (event: any, val: any) => {
      //拿到选中的这个节点数组
      setTimeout(function () {
        if (casOb.value.selectViewValue.length != 0) {
          pageData.title = slicing(casOb.value.selectViewValue[0]['label'])
          dataForm.applyCompanys = slicing(casOb.value.selectViewValue[0]['label'])
        }
      }, 100)
      getBmGroup(val)
      dataForm.applyDepartmentId = ''
      dataForm.applyDepartment = ''
      pageData.bmList = []
    }
    //部门改变
    const cascaderChange1 = (val: any) => {
      //拿到选中的这个节点数组
      setTimeout(function () {
        if (casOb1.value.selectViewValue.length != 0) {
          pageData.title1 = slicing(casOb1.value.selectViewValue[0]['label'])
          dataForm.applyDepartment = slicing(casOb1.value.selectViewValue[0]['label'])
          dataForm.applyDepartmentId = val
        }
      }, 100)
    }
    const casOb2 = ref()
    const casOb3 = ref()
    //公司改变
    const cascaderChange2 = (event: any, val: any) => {
      //拿到选中的这个节点数组
      setTimeout(function () {
        if (casOb2.value.selectViewValue.length != 0) {
          pageData.title2 = slicing(casOb2.value.selectViewValue[0]['label'])
          dataForm.useCompanys = slicing(casOb2.value.selectViewValue[0]['label'])
        }
      }, 100)
      getBmGroup1(val)
      ckNum()
      pageData.bmList1 = []
      dataForm.useDepartmentId = ''
    }
    //公司改变
    const cascaderChanges2 = (event: any, val: any) => {
      //拿到选中的这个节点数组
      setTimeout(function () {
        if (casOb2.value.selectViewValue.length != 0) {
          pageData.title2 = slicing(casOb2.value.selectViewValue[0]['label'])
          dataForm.useCompanys = slicing(casOb2.value.selectViewValue[0]['label'])
        }
      }, 100)
      getBmGroup1(val)
      ckNum2()
      dataForm.useDepartmentId = ''
      pageData.bmList1 = []
    }
    //部门改变
    const cascaderChange3 = (val: any) => {
      //拿到选中的这个节点数组
      setTimeout(function () {
        if (casOb3.value.selectViewValue.length != 0) {
          pageData.title3 = slicing(casOb3.value.selectViewValue[0]['label'])
          dataForm.useDepartment = slicing(casOb3.value.selectViewValue[0]['label'])
          dataForm.useDepartmentId = val
        }
      }, 100)
    }
    const loadingbm = ref<boolean>(false)
    // 获取部门列表
    loadingbm.value = true
    const getBmGroup1 = (val: any) => {
      post({
        url: 'org/baCompany/getDepartmentTree?companyId=' + val,
      })
        .then((result) => {
          if (result.code === 200) {
            pageData.bmList1 = result.data
          }
          loadingbm.value = false
        })
        .catch(() => {
          loadingbm.value = false
        })
    }

    // 获取部门列表
    const getBmGroup = (val: any) => {
      post({
        url: 'org/baCompany/getDepartmentTree?companyId=' + val,
      }).then((result) => {
        if (result.code === 200) {
          pageData.bmList = result.data
        }
      })
    }

    //搜索框 公司部门改变
    let casOb5 = ref()
    const casOb6 = ref()
    const cascaderChange5 = (event: any, val: any) => {
      pageData.nameListq = []
      pageData.dropDownDataqqq = ''
      setTimeout(function () {
        if (casOb5.value.selectViewValue.length != 0) {
          pageData.title5 = slicing(casOb5.value.selectViewValue[0]['label'])
          pageData.dropDownDataqqq1s = slicing(casOb5.value.selectViewValue[0]['label'])
        }
      }, 100)
      getBmGroup6(val)
      doRefresh()
    }
    const cascaderChange6 = (val: any) => {
      setTimeout(function () {
        if (casOb6.value.selectViewValue.length != 0) {
          pageData.title6 = slicing(casOb6.value.selectViewValue[0]['label'])
          pageData.dropDownDataqqqs = slicing(casOb6.value.selectViewValue[0]['label'])
        }
      }, 100)
      doRefresh()
    }
    //搜索框  获取部门列表
    const getBmGroup6 = (val: any) => {
      post({
        url: 'org/baCompany/getDepartmentTree?companyId=' + val,
      }).then((result) => {
        if (result.code === 200) {
          pageData.nameListq = result.data
        }
      })
    }
    //创建申购单 库存数量
    const ckNum2 = () => {
      post({
        url: '/wms/ironwareStockSummary/getStockNumProcurement',
        data: isDataListss.value.map((item: any) => {
          return {
            materialCode: item.materialCode,
            companyId: dataForm.useCompany,
            materialName: item.materialName,
          }
        }),
      }).then((res: any) => {
        const { data } = res
        isDataListss.value.map((item: any, index: any) => {
          if (item.materialCode == data[index].materialCode) {
            item.stockNum = data[index].stockNum
          }
        })
      })
    }
    //需求单创建申购单 库存数量
    const ckNum = () => {
      post({
        url: '/wms/ironwareStockSummary/getStockNumProcurement',
        data: pageData.tqDataList.map((item: any) => {
          return {
            materialCode: item.materialCode,
            companyId: dataForm.useCompany,
            materialName: item.materialName,
          }
        }),
      }).then((res: any) => {
        const { data } = res
        pageData.tqDataList.map((item: any, index: any) => {
          if (item.materialCode == data[index].materialCode) {
            item.stockNum = data[index].stockNum
          }
        })
      })
    }
    //详情中的 库存数量
    const ckNum3 = () => {
      post({
        url: '/wms/ironwareStockSummary/getStockNumProcurement',
        data: pageData.isDetailsList.map((item: any) => {
          return {
            materialCode: item.materialCode,
            companyId: gridOption.value.getSelectedRows()[0].useCompany,
            materialName: item.materialName,
          }
        }),
      }).then((res: any) => {
        const { data } = res
        pageData.isDetailsList.map((item: any, index: any) => {
          if (item.materialCode == data[index].materialCode) {
            item.stockNum = data[index].stockNum
          }
        })
      })
    }

    //添加物料 弹窗
    const selectedRowKeys3: any = ref([])
    let dataList: any = ref([])
    const materialCode: any = ref('')
    const materialName: any = ref('')
    const bigClassName: any = ref('')
    const subClassName: any = ref('')
    const specName: any = ref('')
    const visibleWl = ref(false)
    const listPage: any = reactive({
      total: 0,
      size: 10,
      page: 1,
    })
    const PageSize3 = (val: any) => {
      listPage.page = val
      listQuery()
    }

    const change3 = (val: any) => {
      listPage.size = val
      listQuery()
    }

    const tableColumns5 = useTableColumn([
      {
        title: '物料大类',
        key: 'bigClassName',
        dataIndex: 'bigClassName',
        width: 300,
      },
      {
        title: '物料小类',
        key: 'subClassName',
        dataIndex: 'subClassName',
        width: 300,
      },
      {
        title: '物料编号',
        key: 'materialCode',
        dataIndex: 'materialCode',
        width: 300,
      },
      {
        title: '物料名称',
        key: 'materialName',
        dataIndex: 'materialName',
        width: 300,
      },
      {
        title: '规格',
        key: 'specName',
        dataIndex: 'specName',
        width: 300,
      },
      {
        title: '单位',
        key: 'unit',
        dataIndex: 'unit',
        width: 300,
      },
      {
        title: '图片',
        key: 'picture',
        dataIndex: 'picture',
        slotName: 'picture',
        width: 150,
      }
    ])

    const Query = () => {
      listPage.page = 1
      listQuery()
    }
    const listQuery = () => {
      pageData.pageLoading = true
      post({
        url: 'dwPurchase/MaterialInfo/getPage',
        data: {
          page: listPage.page,
          size: listPage.size,
          deleteState: 0,
          materialName: materialName.value,
          materialCode: materialCode.value,
          bigClassName: bigClassName.value,
          subClassName: subClassName.value,
          specName: specName.value,
          auditState: 1,
        },
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            listPage.total = data.total
            dataList.value = data.list
            dataList.value.forEach((item: any) => {
              item['isTypeIds'] = isTypeIds++
            })
          }
        })
        .catch(console.log)
        .finally(() => {
          pageData.pageLoading = false
        })
    }
    const handleOk = () => {
      if (selectedRowKeys3.value.length === 0) {
        Message.error('请勾选数据!')
        return false
      }

      let listArray: any = []
      for (let i = 0; i < dataList.value.length; i++) {
        if (selectedRowKeys3.value.includes(dataList.value[i].isTypeIds)) {
          listArray.push(dataList.value[i])
        }
      }
      if (isDataListss.value.length != 0) {
        let wlAarray: any = []
        for (let i = 0; i < listArray.length; i++) {
          wlAarray.push(listArray[i].materialCode)
        }
        for (let i = 0; i < isDataListss.value.length; i++) {
          if (wlAarray.includes(isDataListss.value[i].materialCode)) {
            Message.error(`不能重复添加物料名为 ${isDataListss.value[i].materialName} 的单据!`)
            return false
          }
        }
      }
      listArray.forEach((e: any) => {
        e['materialCode'] = e['materialCode']
        e['materialName'] = e['materialName']
        e['specName'] = e['specName']
        e['unit'] = e['unit']
        e['id'] = null
        e['isTypeIds'] = isTypeIds++
      })
      isDataListss.value.push(...listArray)
      ckNum2()
      materialCode.value = ''
      materialName.value = ''
      bigClassName.value = ''
      subClassName.value = ''
      specName.value = ''
      dataList.value = []
      selectedRowKeys3.value = []
      listPage.total = 0
      visibleWl.value = false
      return true
    }
    const handleCancel = () => {
      materialCode.value = ''
      materialName.value = ''
      bigClassName.value = ''
      subClassName.value = ''
      specName, value = ''
      dataList.value = []
      selectedRowKeys3.value = []
      listPage.total = 0
      visibleWl.value = false
    }

    const permissionStore = usePermission()
    if (permissionStore.hasPermisson('sgdfs.xg1')) {
      pageData.isEdit = true
    }
    if (permissionStore.hasPermisson('sgdfs.xq1')) {
      pageData.isDetail = true
    }
    //下拉框   物料大类  
    const WLfocusSel = () => {
      WLselCxAll({ bigClassName: '', auditState: 1 })
    }
    const WLoptions = ref<any>(pageData.bigName)
    const WLloading = ref(false)
    const WLhandleSearch = (value: any) => {
      if (value) {
        const ob = { bigClassName: value, auditState: 1 }
        WLloading.value = true
        window.setTimeout(() => {
          selCxAll(ob)
          WLoptions.value = pageData.bigName
          WLloading.value = false
        }, 200)
      } else {
        WLoptions.value = []
      }
    }
    function WLselCxAll(val: any) {
      post({
        url: 'dwPurchase/MaterialInfo/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          let list = []
          for (let i = 0; i < data.length; i++) {
            var ob = data[i].bigClassName
            list.push(ob)
          }
          const arr = list
          const setData = Array.from(new Set(arr));
          pageData.bigName = setData
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    const bigChange = () => {
      subClassName.value = ''
      pageData.samllName = []
    }
    //下拉框   物料小类  
    const WLfocusSel1 = () => {
      WLselCxAll1({ subClassName: '', auditState: 1 })
    }
    const WLoptions1 = ref<any>(pageData.samllName)
    const WLloading1 = ref(false)
    const WLhandleSearch1 = (value: any) => {
      if (value) {
        const ob = { subClassName: value, auditState: 1 }
        WLloading.value = true
        window.setTimeout(() => {
          WLselCxAll1(ob)
          WLoptions.value = pageData.samllName
          WLloading.value = false
        }, 200)
      } else {
        WLoptions.value = []
      }
    }
    function WLselCxAll1(val: any) {
      if (bigClassName.value === '') {
        Message.warning('请先选择物料大类！')
        pageData.samllName = []
      }
      post({
        url: 'dwPurchase/MaterialInfo/getList',
        data: {
          bigClassName: bigClassName.value
        }
      }).then(({ data, code }: any) => {
        if (code === 200) {
          let list = []
          for (let i = 0; i < data.length; i++) {
            var ob = data[i].subClassName
            list.push(ob)
          }
          const arr = list
          const setData = Array.from(new Set(arr));
          pageData.samllName = setData
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    // 下拉框  物料编码 
    const WLfocusSel2 = () => {
      WLselCxAll2({ materialCode: '', auditState: 1 })
    }
    const WLoptions2 = ref<any>(pageData.codeList)
    const WLloading2 = ref(false)
    const WLhandleSearch2 = (value: any) => {
      if (value) {
        const ob = { materialCode: value, auditState: 1 }
        WLloading2.value = true;
        WLselCxAll2(ob);
        WLoptions2.value = pageData.codeList;
        WLloading2.value = false;
      } else {
        WLoptions2.value = []
      }
    }
    function WLselCxAll2(val: any) {
      post({
        url: 'dwPurchase/MaterialInfo/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          pageData.codeList = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    const WLhandleCode = (e: any) => {
      materialCode.value = e.split('——')[0]
    }

    // 下拉框  物料名称
    const WLfocusSel3 = () => {
      WLselCxAll3({ materialName: '', auditState: 1 })
    }
    const WLoptions3 = ref<any>(pageData.wlNameList)
    const WLloading3 = ref(false)
    const WLhandleSearch3 = (value: any) => {
      if (value) {
        const ob = { materialName: value, auditState: 1 }
        WLloading3.value = true;
        WLselCxAll3(ob);
        WLoptions3.value = pageData.wlNameList;
        WLloading3.value = false;
      } else {
        WLoptions3.value = []
      }
    }
    function WLselCxAll3(val: any) {
      post({
        url: 'dwPurchase/MaterialInfo/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          pageData.wlNameList = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    const WLhandleName = (e: any) => {
      materialName.value = e.split('——')[1]
    }

    // 下拉框  规格
    const WLfocusSel4 = () => {
      WLselCxAll4({ specName: '', auditState: 1 })
    }
    const WLoptions4 = ref<any>(pageData.specList)
    const WLloading4 = ref(false)
    const WLhandleSearch4 = (value: any) => {
      if (value) {
        const ob = { specName: value, auditState: 1 }
        WLloading4.value = true;
        WLselCxAll4(ob);
        WLoptions4.value = pageData.specList;
        WLloading4.value = false;
      } else {
        WLoptions4.value = []
      }
    }
    function WLselCxAll4(val: any) {
      post({
        url: 'dwPurchase/MaterialInfo/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          pageData.specList = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    //打印预览PDF
    const printPdf = () => {
      if (gridOption.value.getSelectedRows().length == 0) {
        Message.error('请先勾选')
        return
      }
      if (gridOption.value.getSelectedRows().length > 1) {
        Message.error('只能勾选一条')
        return
      }
      post({
        url: '/dwPurchase/PurchaseApply/getListDY',
        data: { id: gridOption.value.getSelectedRows()[0].id,},
        responseType: 'blob'
      }).then((res) => {
        let reader = new FileReader();
        reader.readAsDataURL(res);
        reader.onload = function () {
          let pdfBase64 = reader.result.replace('data:application/pdf;base64,', '');
          printJS({ printable: pdfBase64, type: 'pdf', base64: true })
        };
      });

    }
    return {
      printPdf,
      bigChange,
      WLhandleCode,
      WLhandleName,
      specName,
      WLoptions,
      WLoptions1,
      WLoptions2,
      WLoptions3,
      WLoptions4,
      WLloading,
      WLloading1,
      WLloading2,
      WLloading3,
      WLloading4,
      WLfocusSel,
      WLfocusSel1,
      WLfocusSel2,
      WLfocusSel3,
      WLfocusSel4,
      WLhandleSearch,
      WLhandleSearch1,
      WLhandleSearch2,
      WLhandleSearch3,
      WLhandleSearch4,
      WLselCxAll,
      WLselCxAll1,
      WLselCxAll2,
      WLselCxAll3,
      WLselCxAll4,
      listPage,
      Query,
      listQuery,
      dataList,
      selectedRowKeys3,
      tableColumns5,
      change3,
      PageSize3,
      handleOk,
      handleCancel,
      visibleWl,
      materialCode,
      materialName,
      bigClassName,
      subClassName,
      permissionStore,
      loadingbm,
      ckNum3,
      tableColumns3,
      cascaderChanges2,
      ckNum,
      ckNum2,
      typeChange,
      casOb,
      casOb1,
      casOb2,
      casOb3,
      casOb5,
      casOb6,
      pagingList1,
      getBmGroup1,
      getBmGroup6,
      cascaderChange6,
      cascaderChange5,
      cascaderChange3,
      cascaderChange2,
      cascaderChange,
      cascaderChange1,
      getFirmGroup,
      total,
      no,
      dataTime,
      dataTime2,
      idDtaDy,
      idDtaDys,
      print,
      visiblecg,
      dayCogu,
      huiche,
      localeText1,
      handles,
      focusSelsm,
      handleSearchsm,
      optionssm,
      loadingsm,
      hqWlCodezs,
      hqWlCodes,
      isWlCodeList,
      hqWlCode,
      scWls,
      cancelDelets,
      tjWls,
      isDataListss,
      sideOkss,
      isDtasZh,
      tcsz111,
      defaultColDefsz111,
      gridReadysz111,
      gridOptionsz111,
      tc,
      defaultColDef,
      gridReady,
      gridOption,
      change1,
      PageSize,
      // foucusUseFrim,
      changeGs,
      options2,
      loading2,
      handleSearch2,
      focusSelqqq1,
      handleSearchqqq1,
      optionsqqq1,
      loadingqqq1,
      isDatas,
      xuQiuWls,
      xuQiuWl,
      loadingqqq,
      focusSelqqq,
      handleSearchqqq,
      pagination1,
      headerShow,
      tableColumnsz,
      selectSh,
      handleBeforeOk,
      tqxqd,
      visible,
      auditStates,
      // auditSh,
      handleSearchqs,
      focusSelqs,
      loadingqs,
      loadingq,
      focusSelq,
      handleSearchq,
      scWl,
      cancelsDel,
      focusSelz,
      handleSearchz,
      selectedRowKeys1,
      isDataLists,
      sideOks,
      handleSearchs,
      focusSels,
      isDataList,
      tjWl,
      tableColumns1,
      deleteHandler,
      sideOk,
      formRef,
      dataForm,
      addHandler,
      selectedRowKeys,
      pagination,
      tableColumns,
      table,
      rowKey,
      pageData,
      queryData,
      editHandler,
      selectHandler,
      inputBlur,
      isChiese,
      exports,
      options,
      loading,
      handleSearch,
      focusSel,
      downloadHandler,
      importHandler,
      pageData1,
      tables,
      submit,
      delRow,
      cxDetails,
      visible1,
      tableColumns2,
      onSelect(dateString: any, date: any) {
        pageData.dropDownDataqszs = {
          startDate: dateString[0],
          endDate: dateString[1],
        }
      },
      onClear() {
        pageData.dropDownDataqszs = {}
      },
    }
  },
  components: { Toolbar,  },
}
</script>
<style lang="less" scoped>
.xqdxx {
  display: flex;
}

.isTable {
  margin-top: 100px;
  width: 100%;
  margin: 0 auto;
  border: 1.2px solid #ccc;
  text-align: center;
  border-collapse: collapse;

  td {
    border: 1.2px solid #ccc;
  }

  th {
    border: 1.2px solid #ccc;
  }
}

#dys {
  display: flex;
  width: 100%;
  margin: 0 auto;
  justify-content: space-between;
  font-weight: 1000;

  div {
    width: 200px;
  }
}
:deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}

</style>